import axios from "axios";

//引入进度条
import nProgress from "nprogress";
import "nprogress/nprogress.css";

/* 
  自定义环境变量：
  通过npm run serve启动时，我们本地系统的环境变量NODE_ENV 值设置为 development，这时就会先后加载.env和.env.development这两个文件。
  而当我们打包到服务器后，服务器的NODE_ENV值被设置为production，则此时Vue仍会先加载.env文件，然后加载.env.
  
  production文件。可以在项目的根目录创建以下文件
  .env.development:开发环境下的环境变量配置文件
  .env.production:生产环境下的环境变量配置文件
  .env:无论生产还是开发环境都会加载的配置文件

  不同模式 不同的环境变量 
*/
//创建axios实例
const MyRequest = axios.create({
  //基础路径
  baseURL: process.env.VUE_APP_MOCKAPI,
  //超时时间
  timeout: 10000,
});

//给axios实例配置拦截器
// 添加请求拦截器
MyRequest.interceptors.request.use(
  function (config) {
    // 开始进度条
    nProgress.start();
    // 在发送请求之前 config是axios请求的配置对象  最后需要返回出去  要不然无法进行下一步操作
    return config;
    //进入处理失败的回调函数有两种方法：1.请求拦截器可以设置多个，当上一次失败的就会进入当此的失败函数  2.给拦截器传入额外的参数，主动进入
  },
  function (error) {
    /* 
    为什么返回失败的promise实例？
    因为拦截器最终的返回结果是通过then方式返回的,then或catch只有在返回失败的promise实例的时候,then或catch才是失败状态,axios才能知道我们失败了,如果只是单纯的把错误信息返回出去,依然是成功状态promise实例,值是错误信息而已。
  */
    return Promise.reject(error.message);
  }
);

// 添加响应拦截器
MyRequest.interceptors.response.use(
  function (response) {
    // 结束进度条
    nProgress.done();
    // 我们需要在响应拦截器中返回请求到的数据 若不然axios无法接收到返回的数据
    if (response.data.code === 200) {
      return response.data.data;
    } else {
      return Promise.reject({
        message: response.data.message,
      });
    }
  },
  function (error) {
    nProgress.done();
    // 返回失败的promise实例
    return Promise.reject(error.message);
  }
);

export default MyRequest;
